<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="../css/popup.css" type="text/css" rel="stylesheet" charset="utf-8">
    <script src="../js/vue.min.js"></script>
    <script src="../js/vue-dragula.js"></script>
    <script src="../js/md5.js"></script>
    <script src="../js/aes.js"></script>
    <script src="../js/sha.js"></script>
    <script src="../js/qrcode.js"></script>
    <script src="../build/models/encryption.js"></script>
    <script src="../build/models/interface.js"></script>
    <script src="../build/models/key-utilities.js"></script>
    <script src="../build/models/otp.js"></script>
    <script src="../build/models/storage.js"></script>
    <script src="../build/models/backup.js"></script>
    <script src="../build/models/credentials.js"></script>
</head>
<body>
<div id="authenticator" v-cloak v-bind:class="{ 'theme-normal': !useHighContrast, 'theme-accessibility': useHighContrast }">
    <div class="header">
        <span>{{ i18n.extName }}</span>
        <div v-show="!isPopup()">
            <div class="icon" id="i-menu" title="{{ i18n.settings }}" v-on:click="showMenu()" v-show="!class.edit"><svg><use xlink:href="../css/solid.svg#cog"></use></svg></div>
            <div class="icon" id="i-lock" title="{{ i18n.lock }}" v-on:click="lock()" v-show="!class.edit && encryption.getEncryptionStatus()"><svg><use xlink:href="../css/solid.svg#lock"></use></svg></div>
            <div class="icon" id="i-sync" v-bind:style="{left: encryption.getEncryptionStatus() ? '70px' : '45px'}" v-show="(dropboxToken !== '' || driveToken !== '') && !class.edit"><svg><use xlink:href="../css/solid.svg#sync-alt"></use></svg></div>
            <div class="icon" id="i-qr" title="{{ i18n.add_qr }}" v-show="!class.edit" v-on:click="beginCapture()"><svg><use xlink:href="../images/scan.svg#scan"></use></svg></div>
            <div class="icon" id="i-edit" title="{{ i18n.edit }}" v-if="!class.edit" v-on:click="editEntry()"><svg><use xlink:href="../css/solid.svg#pencil-alt"></use></svg></div>
            <div class="icon" id="i-edit" title="{{ i18n.edit }}" v-else v-on:click="editEntry()"><svg><use xlink:href="../css/solid.svg#check"></use></svg></div>
        </div>
    </div>
    <div id="codes" v-bind:class="{'timeout': class.timeout && !class.edit, 'edit': class.edit, 'filter': shouldFilter && filter, 'search': showSearch}">
        <div class="under-header" id="filter" v-on:click="clearFilter()">{{ i18n.show_all_entries }}</div>
        <div class="under-header" id="search">
          <input id="searchInput" v-on:keydown="searchUpdate()" v-model="searchText" placeholder="{{ i18n.search }}" type="text">
          <div id="searchHint" v-if="typeof searchText !== 'string'">
            <div></div>
            <div id="searchHintBorder">/</div>
            <div></div>
          </div>
        </div>
        <div v-dragula="entries">
            <!-- ENTRIES -->
            <div class="entry" v-for="entry in entries" v-bind:filtered="!isMatchedEntry(entry)" v-bind:notSearched="!isSearchedEntry(entry)">
                <div class="deleteAction" v-on:click="removeEntry(entry)"><svg><use xlink:href="../css/solid.svg#minus-circle"></use></svg></div>
                <div class="sector" v-if="entry.type !== OTPType.hotp && entry.type !== OTPType.hhex" v-show="sectorStart">
                    <svg viewBox="0 0 16 16">
                        <circle cx="8" cy="8" r="4" v-bind:style="{animationDuration: entry.period + 's', animationDelay: (sectorOffset % entry.period) + 's'}"/>
                    </svg>
                </div>
                <div v-bind:class="{'counter': true, 'disabled': class.hotpDiabled}" v-if="entry.type === OTPType.hotp || entry.type === OTPType.hhex" v-on:click="nextCode(entry)"><svg><use xlink:href="../css/solid.svg#redo-alt"></use></svg></div>
                <div class="issuer">{{ entry.issuer.split('::')[0] }}</div>
                <div class="issuerEdit">
                    <input placeholder="{{ i18n.issuer }}" type="text" v-model="entry.issuer" v-on:change="entry.update(encryption)">
                </div>
                <div v-bind:class="{'code': true, 'hotp': entry.type === OTPType.hotp || entry.type === OTPType.hhex, 'no-copy': noCopy(entry.code), 'timeout': entry.period - second % entry.period < 5 }" v-on:click="copyCode(entry)" v-html="class.edit ? showBulls(entry.code) : entry.code"></div>
                <div class="issuer">{{ entry.account }}</div>
                <div class="issuerEdit">
                    <input placeholder="{{ i18n.accountName }}" type="text" v-model="entry.account" v-on:change="entry.update(encryption)">
                </div>
                <div class="showqr" v-if="shouldShowQrIcon(entry)" v-on:click="showQr(entry)"><svg><use xlink:href="../css/solid.svg#qrcode"></use></svg></div>
                <div class="movehandle"><svg><use xlink:href="../css/solid.svg#bars"></use></svg></div>
            </div>
        </div>
        <div class="icon" id="add" v-on:click="showInfo('account')"><svg><use xlink:href="../css/solid.svg#plus"></use></svg></div>
    </div>

    <!-- MENU -->
    <div id="menu" v-bind:class="{'slidein': class.slidein, 'slideout': class.slideout}">
        <div class="header">
            <span id="menuName">{{ i18n.settings }}</span>
            <div class="icon" id="i-close" v-on:click="closeMenu()"><svg><use xlink:href="../css/solid.svg#arrow-left"></use></svg></div>
        </div>
        <div id="menuBody">
            <div class="menuList">
                <p v-bind:title="i18n.about" v-on:click="showInfo('about')"><span><svg><use xlink:href="../css/solid.svg#info"></use></svg></span>{{ i18n.about }}</p>
            </div>
            <div class="menuList">
                <p v-bind:title="i18n.export_import" v-on:click="showInfo('export')"><span><svg><use xlink:href="../css/solid.svg#exchange-alt"></use></svg></span>{{ i18n.export_import }}</p>
                <p v-bind:title="i18n.storage_menu" v-on:click="showInfo('storage')" v-show="!isEdge()"><span><svg><use xlink:href="../css/solid.svg#database"></use></svg></span>{{ i18n.storage_menu }}</p>
                <p v-bind:title="i18n.security" v-on:click="showInfo('security')"><span><svg><use xlink:href="../css/solid.svg#lock"></use></svg></span>{{ i18n.security }}</p>
                <p v-bind:title="i18n.sync_clock" v-on:click="syncClock()"><span><svg><use xlink:href="../css/solid.svg#sync-alt"></use></svg></span>{{ i18n.sync_clock }}</p>
                <p v-bind:title="i18n.resize_popup_page" v-on:click="showInfo('resize')"><span><svg><use xlink:href="../css/solid.svg#wrench"></use></svg></span>{{ i18n.resize_popup_page }}</p>
            </div>
                <div class="menuList">
                <p v-bind:title="i18n.feedback" v-on:click="openHelp"><span><svg><use xlink:href="../css/solid.svg#comments"></use></svg></span>{{ i18n.feedback }}</p>
                <p v-bind:title="i18n.translate" v-on:click="openLink('https://crwd.in/authenticator-firefox')"><span><svg><use xlink:href="../css/solid.svg#globe-americas"></use></svg></span>{{ i18n.translate }}</p>
                <p v-bind:title="i18n.source" v-on:click="openLink('https://github.com/Authenticator-Extension/Authenticator')"><span><svg><use xlink:href="../css/solid.svg#code"></use></svg></span>{{ i18n.source }}</p>
            </div>
            <div id="version">Version {{ version }}</div>
        </div>
    </div>

    <!-- INFO -->
    <div id="info" v-bind:class="{'fadein': class.fadein, 'fadeout': class.fadeout}">
        <div id="infoClose" v-if="info !== 'passphrase'" v-on:click="closeInfo()"><svg><use xlink:href="../css/solid.svg#times-circle"></use></svg></div>
        <div id="infoContent">
            <!-- ABOUT -->
            <div v-show="info === 'about'">
                <p><strong>Authenticator</strong> &copy; 2019 <a target='_blank' href='https://github.com/Authenticator-Extension'>Authenticator Extension</a>. Released under the MIT License.</p>
                <p><a target='_blank' href='https://code.google.com/p/crypto-js/'>crypto-js</a> Copyright Jeff Mott. Licensed under the BSD License.</p>
                <p><a target='_blank' href='http://www.droidfonts.com/'>Droid Sans Mono</a> Copyright Steve Matteson. Licensed under the Apache License.</p>
                <p><a target='_blank' href='https://github.com/FortAwesome/Font-Awesome'>Font Awesome Free</a> Licensed under CC BY 4.0</p>
                <p><a target='_blank' href='https://github.com/jprichardson/node-fs-extra'>fs-extra</a> Copyright JP Richardson. Licensed under the MIT License.</p>
                <p>Google and Google Drive are trademarks of Google LLC.</p>
                <p><a target='_blank' href='https://github.com/LazarSoft/jsqrcode'>jsqrcode</a> Copyright Lazar Laszlo. Licensed under the Apache License.</p>
                <p><a target='_blank' href='http://caligatio.github.com/jsSHA/'>jsSHA</a> Copyright Brian Turek. Licensed under the BSD License.</p>
                <p><a target='_blank' href='http://davidshimjs.github.io/qrcodejs/'>qrcode.js</a> Copyright Shim Sangmin. Licensed under the MIT License.</p>
                <p><a target='_blank' href='https://github.com/sass/sass'>sass</a> Copyright Hampton Catlin, Natalie Weizenbaum, and Chris Eppstein under the MIT License</p>
                <p><a target='_blank' href='http://blog.tinisles.com/2011/10/google-authenticator-one-time-password-algorithm-in-javascript/'>totp.js</a> Copyright Russ Sayers. Licensed under the MIT License.</p>
                <p><a target='_blank' href='https://github.com/google/ts-style'>ts-style</a> Copyright Google Inc. Licensed under the Apache License.</p>
                <p><a target='_blank' href='https://github.com/Microsoft/TypeScript'>TypeScript</a> Copyright Microsoft Corporation. Licensed under the Apache License.</p>
                <p><a target='_blank' href='https://github.com/vuejs/vue'>vue.js</a> Copyright Evan You. Licensed under the MIT License.</p>
                <p><a target='_blank' href='https://github.com/Astray-git/vue-dragula'>vue-dragula</a> Copyright Yichang Liu. Licensed under the MIT License.</p>
                <p><a target='_blank' href='https://github.com/zxing/zxing'>ZXing</a> Copyright ZXing authors. Licensed under the Apache License.</p>
                <p>Thanks to <a target='_blank' href='https://github.com/multiwebinc'>Mike Robinson</a> &lt;3</p>
                <p v-if="!isEdge()"><a target='_blank' href='qrdebug.html'>QR Debugging</a></p>
                <!-- Workaround for https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18438862 -->
                <p v-else><a v-on:click="createWindow('view/qrdebug.html')">QR Debugging</a></p>
            </div>
            <!-- ADD ACCOUNT -->
            <div v-show="info === 'account'">
                <div v-show="!newAccount.show">
                    <div class="button" v-on:click="beginCapture()">{{ i18n.add_qr }}</div>
                    <div class="button" v-on:click="addAccountManually()">{{ i18n.add_secret }}</div>
                </div>
                <div v-show="newAccount.show">
                    <label>{{ i18n.accountName }}</label>
                    <input type="text" class="input" v-model="newAccount.account">
                    <label>{{ i18n.secret }}</label>
                    <input type="text" class="input" v-model="newAccount.secret">
                    <select v-model="newAccount.type">
                        <option v-bind:value="OTPType.totp">{{ i18n.based_on_time }}</option>
                        <option v-bind:value="OTPType.hotp">{{ i18n.based_on_counter }}</option>
                        <option v-bind:value="OTPType.battle">Battle.net</option>
                        <option v-bind:value="OTPType.steam">Steam</option>
                    </select>
                    <div class="button-small" v-on:click="addNewAccount()">{{ i18n.ok }}</div>
                </div>
            </div>
            <!-- SECURITY -->
            <div v-show="info === 'security'">
                <div class="text warning">{{ i18n.security_warning }}</div>
                <label>{{ i18n.phrase }}</label>
                <input class="input" type="password" v-model="newPassphrase.phrase">
                <label>{{ i18n.confirm_phrase }}</label>
                <input class="input" type="password" v-model="newPassphrase.confirm" v-on:keyup.enter="changePassphrase()">
                <div id="security-save" v-on:click="changePassphrase()">{{ i18n.ok }}</div>
                <div id="security-remove" v-on:click="removePassphrase()">{{ i18n.remove }}</div>
                <label>密码前缀(按回车保存)</label>
                <input class="input" type="password" v-model="newPassphrase.prefix" v-on:keyup.enter="setPrefix()">
            </div>
            <!-- PASSPHRASE -->
            <div v-show="info === 'passphrase'">
                <div class="text">{{ i18n.passphrase_info }}</div>
                <label></label>
                <input class="input" type="password" v-model="passphrase" v-on:keyup.enter="applyPassphrase()" autofocus>
                <div class="button-small" v-on:click="applyPassphrase()">{{ i18n.ok }}</div>
            </div>
            <!-- EXPORT -->
            <div v-show="info === 'export'">
                <div class="text warning" v-if="!encryption.getEncryptionStatus()">{{ i18n.export_info }}</div>
                <div class="text warning" v-if="unsupportedAccounts">{{ i18n.otp_unsupported_warn }}</div>
                <a class="button" v-on:click="showEdgeBugWarning()" v-if="isEdge()">{{ i18n.download_backup }}</a>
                <a download="authenticator.txt" v-bind:href="exportOneLineOtpAuthFile" v-if="!unsupportedAccounts" class="button" target="_blank">{{ i18n.download_backup }}</a>
                <a download="authenticator.json" v-bind:href="exportFile" class="button" target="_blank" v-else>{{ i18n.download_backup }}</a>
                <a download="authenticator.json" v-bind:href="exportEncryptedFile" v-if="encryption.getEncryptionStatus()" class="button" target="_blank">{{ i18n.download_enc_backup }}</a>
                <a class="button" href="import.html" target="_blank" v-if="!isEdge()">{{ i18n.import_backup }}</a>
                <!-- Workaround for https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/18438862 -->
                <a class="button" v-on:click="createWindow('view/import.html')" v-else>{{ i18n.import_backup }}</a>
            </div>
            <!-- DROPBOX -->
            <div v-show="info === 'dropbox'">
                <div>
                    <div class="text warning" v-if="dropboxEncrypted !== 'true' || !encryption.getEncryptionStatus()">{{ i18n.dropbox_risk }}</div>
                    <div v-if="encryption.getEncryptionStatus() && dropboxToken">
                        <label class="combo-label">{{ i18n.encrypted }}</label>
                        <select v-model="dropboxEncrypted" v-on:change="backupUpdateEncryption('dropbox')">
                            <option value="true">{{ i18n.yes }}</option>
                            <option value="false">{{ i18n.no }}</option>
                        </select>
                    </div>
                    <div class="button" v-if="dropboxToken" v-on:click="backupLogout('dropbox')">{{ i18n.log_out }}</div>
                    <div class="button" v-else v-on:click="getBackupToken('dropbox')">{{ i18n.sign_in }}</div>
                    <div class="button" v-if="dropboxToken" v-on:click="backupUpload('dropbox')">{{ i18n.manual_dropbox }}</div>
                </div>
            </div>
            <!-- DRIVE -->
            <div v-show="info === 'drive'">
                <div>
                    <div class="text warning" v-if="driveEncrypted !== 'true' || !encryption.getEncryptionStatus()">{{ i18n.dropbox_risk }}</div>
                    <div v-if="encryption.getEncryptionStatus() && driveToken">
                        <label class="combo-label">{{ i18n.encrypted }}</label>
                        <select v-model="driveEncrypted" v-on:change="backupUpdateEncryption('drive')">
                            <option value="true">{{ i18n.yes }}</option>
                            <option value="false">{{ i18n.no }}</option>
                        </select>
                    </div>
                    <div class="button" v-if="driveToken" v-on:click="backupLogout('drive')">{{ i18n.log_out }}</div>
                    <div class="button" v-else v-on:click="getBackupToken('drive')">{{ i18n.sign_in }}</div>
                    <div class="button" v-if="driveToken" v-on:click="backupUpload('drive')">{{ i18n.manual_dropbox }}</div>

                </div>
            </div>
            <!-- STORAGE & SYNC SETTINGS -->
            <div v-show="info === 'storage'">
                <!-- Storage Settings -->
                <div class="text">{{ i18n.storage_location_info }}</div>
                <label class="combo-label">{{ i18n.storage_location }}</label>
                <select v-model="newStorageLocation" :disabled="storageArea" v-on:change="migrateStorage()">
                    <option value="sync">sync</option>
                    <option value="local">local</option>
                </select>
                <!-- 3rd Party Backup Services -->
                <div v-show="!backupDisabled" class="text">{{ i18n.storage_sync_info }}</div>
                <p></p>
                <div class="button" v-show="!backupDisabled" v-on:click="showInfo('drive')">Google Drive</div>
                <div class="button" v-show="!backupDisabled" v-on:click="showInfo('dropbox')">Dropbox</div>
            </div>
            <!-- POPUP PAGE SETTINGS -->
            <div v-show="info === 'resize'">
                <div>
                    <label class="combo-label">{{ i18n.scale }}</label>
                    <select v-model="zoom" v-on:change="saveZoom()">
                        <option value="125">125%</option>
                        <option value="100">100%</option>
                        <option value="90">90%</option>
                        <option value="80">80%</option>
                        <option value="67">67%</option>
                        <option value="57">57%</option>
                        <option value="50">50%</option>
                        <option value="40">40%</option>
                        <option value="33">33%</option>
                        <option value="25">25%</option>
                        <option value="20">20%</option>
                    </select>
                </div>
                <div>
                    <label class="combo-label">{{ i18n.use_autofill }}</label>
                    <input class="checkbox" type="checkbox" v-model="useAutofill" v-on:change="saveAutofill()">
                </div>
                <div>
                    <label class="combo-label">{{ i18n.use_high_contrast }}</label>
                    <input class="checkbox" type="checkbox" v-model="useHighContrast" v-on:change="saveHighContrast()">
                </div>
                <div class="button" v-on:click="popOut()">{{ i18n.popout }}</div>
            </div>
        </div>
    </div>

    <!-- MESSAGE -->
    <div class="message-box" v-show="message.length && messageIdle">
        <div>{{ message.length ? message[0] : '' }}</div>
        <div class="button-small" v-on:click="closeAlert()">{{ i18n.ok }}</div>
    </div>

    <!-- CONFRIM -->
    <div class="message-box" v-show="confirmMessage !== ''">
        <div>{{ confirmMessage }}</div>
        <div class="buttons">
            <div class="button-small" v-on:click="confirmOK()">{{ i18n.yes }}</div>
            <div class="button-small" v-on:click="confirmCancel()">{{ i18n.no }}</div>
        </div>
    </div>

    <!-- NOTIFICATITON -->
    <div id="notification" v-bind:class="{'fadein': class.notificationFadein, 'fadeout': class.notificationFadeout}">{{ notification }}</div>

    <!-- QR -->
    <div id="qr" v-bind:class="{'qrfadein': class.qrfadein, 'qrfadeout': class.qrfadeout}" v-bind:style="{'background-image': qr}" v-on:click="hideQr()"></div>

    <!-- OVERLAY -->
    <div id="overlay" v-show="message.length && messageIdle || confirmMessage !== ''"></div>

    <!-- CLIPBOARD -->
    <input type="text" id="codeClipboard" />
</div>
<script src="../build/ui/backup.js"></script>
<script src="../build/ui/add-account.js"></script>
<script src="../build/ui/class.js"></script>
<script src="../build/ui/entry.js"></script>
<script src="../build/ui/i18n.js"></script>
<script src="../build/ui/info.js"></script>
<script src="../build/ui/menu.js"></script>
<script src="../build/ui/message.js"></script>
<script src="../build/ui/passphrase.js"></script>
<script src="../build/ui/qr.js"></script>
<script src="../build/ui/ui.js"></script>
<script src="../build/popup.js"></script>
</body>
</html>
